<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="500px">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="患者信息"> </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form.name" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="form.region" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="生日">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.date1"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="form.date2"
                  style="width: 100%"
                ></el-time-picker>
              </el-col>
            </el-form-item>

            <el-form-item label="患者手机">
              <el-input
                style="width: 300px"
                placeholder="请输入手机号码"
                suffix-icon="el-icon-phone"
                v-model="form.moible"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="患者微信">
              <el-input
                placeholder="请输入微信号码"
                style="width: 300px"
                suffix-icon="el-icon-chat-dot-rounde"
                v-model="form.openid"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入住址内容"
                v-model="form.address"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入过敏史"
                v-model="form.allergyInfo"
              >
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary">患者档案</el-button>
              <el-button type="primary">病例病史</el-button>
            </el-form-item>
          </el-form>
        </el-aside>
        <el-main>
          <el-form ref="form" :model="form" label-width="80px">

              <el-form-item label="接诊类型">
                <el-select v-model="form.region" style="width: 100px">
                  <el-option label="初诊" value="0"></el-option>
                  <el-option label="复诊" value="1"></el-option>
                  <el-option label="急诊" value="2"></el-option>
                </el-select>
              </el-form-item>


              <el-form-item label="发病日期">
               <el-col :span="18">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.date1"
                  style="width: 300px"
                ></el-date-picker>
              </el-col>
              </el-form-item>



            <el-form-item label="患者手机">
              <el-input
                style="width: 300px"
                placeholder="请输入手机号码"
                suffix-icon="el-icon-phone"
                v-model="form.moible"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="患者微信">
              <el-input
                placeholder="请输入微信号码"
                style="width: 300px"
                suffix-icon="el-icon-chat-dot-rounde"
                v-model="form.openid"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="诊断详情">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="填写诊断详情"
                v-model="form.address"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="医生建议">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="医生建议(限制五百字)"
                v-model="form.address"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="填写备注"
                v-model="form.allergyInfo"
              >
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary">患者档案</el-button>
              <el-button type="primary">病例病史</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b5b3d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: whitesmoke;
  color: #333;
  text-align: left;
  line-height: 700px;
}

.el-main {
  background-color: white;
  color: #333;
  text-align: left;
  line-height: 100% px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
